<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta charset="UTF-8">
<style>
#header {
    background-color:lightgray;
    color:black;
    text-align:left;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>

<title>数字示波器</title>
</head>
<body>
<div id="header">
<h1 style="margin-left: 400px;">数字示波器</h1>
<a href="/index.html" style="margin-right: 50px;">数字示波器</a>
<a href="/generator.html" style="margin-right: 50px;">波形发生器</a>
<a href="/file.html" style="margin-right: 50px;">文件</a>
<a href="/log.html" style="margin-right: 50px;">维测</a>
<label id="Version">版本:</label>
</div>
<p/>

<label for="OutputType">波形：</label>
<select name="OutputType" id="OutputType"></select>
<label for="OutputFreq">频率：</label>
<input type="input" id="OutputFreq" name="OutputFreq" size="6" value="100"/>
<label for="OutputAmp">幅值：</label>
<input type="input" id="OutputAmp" name="OutputAmp" size="6" value="1000"/>
<input type="button" id="Active" value="设置" onclick="SendWriteActiveSetting()"/>

<script>
	function UpdateSettingUi(responseText) {
		console.log("output.json:" + responseText);
		var config = JSON.parse(responseText);

		document.getElementById("OutputType").options.length = 0;
		for (var i = 0; i < config.SupportWaveType.length; i++) {
			var option = document.createElement("option");
			option.text = config.SupportWaveType[i];
			document.getElementById("OutputType").add(option);
		}
		document.getElementById("OutputType").value = config.OutputType;
		document.getElementById("OutputFreq").value = config.OutputFreq;
		document.getElementById("OutputAmp").value = config.OutputAmp;
	}

	function SendReadSettingRequesetCb(responseText) {
		UpdateSettingUi(responseText);
	}

	function SendReadSettingRequeset(responseText) {
		SendHttpRequest("/output.json", SendReadSettingRequesetCb);
	}

	function SendWriteActiveSetting() {
		var setting = "OutputType=" + document.getElementById("OutputType").value + 
			"&OutputFreq=" + document.getElementById("OutputFreq").value +
			"&OutputAmp=" + document.getElementById("OutputAmp").value;
		console.log("SendWriteActiveSetting:" + setting);
		SendHttpRequest("/setting.cgi" + "?" + setting, SendReadSettingRequeset);
	}

	function SendHttpRequest(url, callback) {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				if (callback) {
					callback(this.responseText);
				}
				xhttp.abort();
			}
		};
		xhttp.open("GET", url, true);
		xhttp.send();
	}

	function SendVersionCb(responseText) {
		console.log("version: " + responseText);
		document.getElementById("Version").innerText = "版本: " + responseText;
	}

    window.onload = function() {
		SendReadSettingRequeset();
		SendHttpRequest("/version.txt", SendVersionCb);
    }
</script>
</body>
</html>
